<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        canvas{
            border: 1px solid red;
        }
    </style>
</head>
<body>

<canvas width="600" height="600" id="can">您的浏览器不支持画布</canvas>
<script type="text/javascript">
     var can=document.getElementById("can");
     var pen=can.getContext("2d");
     //画一个矩形
//    pen.beginPath();
////    pen.strokeStyle="blue";
//    pen.moveTo(100,100);
//    pen.lineTo(500,100);
//    pen.lineTo(500,400);
//    pen.lineTo(100,400);
//    pen.closePath();
//     pen.stroke();

  //通过beginPath跟closePath把路径或者线条分离开
//     pen.beginPath();
//     pen.strokeStyle="blue";
//     pen.lineWidth="10";
//     pen.rect(200,200,150,200);
//     pen.fillStyle="red";
//     pen.fill();
//     //如果是正常的矩形，那么设置的填充颜色覆盖，边框是改变
//     pen.strokeStyle="rgba(255,255,255,0.8)";
//     pen.fillStyle="rgba(255,255,255,0.8)";
//     pen.fill();
//     pen.closePath();
//     pen.stroke();

  ////////////////////////////////////////////////////
//    pen.beginPath();
//     //覆盖原始的颜色
//     pen.strokeStyle="rgba(0,0,0,0.2)";
//     //strokeRect----边框矩形，不能填充颜色
//    pen.strokeRect(200,450,50,50);
//    pen.closePath();

//     pen.fillStyle="red";
//     pen.fill();
//     pen.strokeStyle="blue";
     //fillRect---填充矩形，不能加边框
//     pen.fillRect(100,100,400,500);







</script>
</body>
</html>